<template>
    <div class="layout">
        <Row type="flex">
            <ICol span="3" class="layout-menu-left">
                <div class="layout-logo-left"></div>
                <IMenu name="left" ref="leftmenu" theme="dark" width="auto " accordion :active-name="itemActive"  :open-names="openNames">
                    <div v-show="display.configs" v-if="perCheck.configs_view">
                        <router-link to="/configs/permission" v-if="perCheck.configs_permission_view">
                            <IMenuItem name="configs/permission"><Icon type="android-hand"></Icon>权限管理</IMenuItem>
                        </router-link>
                        <router-link to="/configs/role" v-if="perCheck.configs_role_view">
                            <IMenuItem name="configs/role"><Icon type="person-stalker"></Icon>角色管理</IMenuItem>
                        </router-link>
                        <router-link to="/configs/admin" v-if="perCheck.configs_admin_view">
                            <IMenuItem name="configs/admin"><Icon type="person"></Icon>后台用户管理</IMenuItem>
                        </router-link>
                        <router-link to="/configs/config" v-if="perCheck.configs_config_view">
                            <IMenuItem name="configs/config"><Icon type="settings"></Icon>公共配置</IMenuItem>
                        </router-link>
                        <router-link to="/configs/smstpl" v-if="perCheck.configs_smstpl_view">
                            <IMenuItem name="configs/smstpl"><Icon type="android-textsms"></Icon>短信模版</IMenuItem>
                        </router-link>
                        <Submenu name="configs/record" v-if="perCheck.configs_record_view" >
                            <template slot="title"> <Icon type="folder"></Icon> 记录</template>
                            <router-link to="/configs/record/sms" v-if="perCheck.configs_record_sms_view"  >
                                <IMenuItem name="configs/record/sms">短信</IMenuItem>
                            </router-link>
                            <router-link to="/configs/record/systemlog" v-if="perCheck.configs_record_systemlog_view"  >
                                <IMenuItem name="configs/record/systemlog">系统日志</IMenuItem>
                            </router-link>
                        </Submenu>
                        <router-link to="/configs/category" v-if="perCheck.configs_category_view">
                            <IMenuItem name="configs/category"><Icon type="navicon-round"></Icon>分类</IMenuItem>
                        </router-link>
                        <router-link to="/configs/banner" v-if="perCheck.configs_banner_view">
                            <IMenuItem name="configs/banner"><Icon type="images"></Icon>横幅广告</IMenuItem>
                        </router-link>
                    </div>
                    <div v-show="display.persons"  v-if="perCheck.persons_view">
                        <router-link to="/persons/person"  v-if="perCheck.persons_person_view">
                            <IMenuItem name="persons/person"><Icon type="person"></Icon>用户列表</IMenuItem>
                        </router-link>
                    </div>
                </IMenu>
            </ICol>
            <ICol span="21">
                <div class="layout-header">
                    <IMenu ref="topmenu" mode="horizontal" theme="dark" :active-name="ModuleActive" @on-select="changeMenu">
                        <div class="layout-nav">
                            <IMenuItem name="persons" v-if="perCheck.persons_view"><Icon type="person"></Icon>用户中心</IMenuItem>
                            <IMenuItem name="configs" v-if="perCheck.configs_view"><Icon type="settings"></Icon>系统配置</IMenuItem>
                            <Dropdown class="f-r m-r-10 coltrol" placement="bottom-end" @on-click="control">
                                <a class="c-w" href="javascript:void(0)">操作&nbsp;&nbsp;<Icon type="arrow-down-b"></Icon></a>
                                <DropdownMenu slot="list" >
                                    <DropdownItem name="password">密码重置</DropdownItem>
                                    <DropdownItem name="logout">退出</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </IMenu>
                </div>
                <router-view></router-view>
                <div class="layout-copy">
                    2016-2017 &copy; Nikolatesfei
                </div>
            </ICol>
        </Row>
        <Password ref="passowrd"></Password>
    </div>
</template>
<script>
    import {Row,Col} from 'iview/src/components/grid';
    import Menu from 'iview/src/components/menu';
    import Icon from 'iview/src/components/icon';
    import Dropdown from 'iview/src/components/dropdown';

    import Axios from 'admin/config/axios';
    import Password from 'admin/components/password';
    import {Permissions,Check} from 'admin/config/permissions';

    export default {
        components:{
            Row,
            'ICol':Col,
            Icon,
            'IMenu':Menu,
            'MenuGroup' : Menu.Group,
            'IMenuItem':Menu.Item,
            'Submenu' : Menu.Sub,
            Dropdown,
            'DropdownMenu' : Dropdown.Menu,
            'DropdownItem' : Dropdown.Item,
            Password,
        },
        data () {
            return {
                ModuleActive: '',
                itemActive: '',
                display:{
                    configs : false,
                    persons : false,
                },
                openNames:[],
                childActive:[],
                perCheck : Permissions,
            }
        },
        methods:{
            //菜单改变
            changeMenu(name){
                this.initMenu();
                this.display[name]= true;
            },
            //菜单初始化
            initMenu(){
                for(var m in this.display){
                    this.display[m] = false;
                }
            },
            //右侧控制
            control(name){
                if(name=='logout'){
                    Axios.Logout()
                    .then(res=>{
                        window.location.href="/admin/login";
                    })
                }
                if(name=='password'){
                    this.$refs['passowrd'].modal = true;
                }
            },
            //菜单状态改变
            menuStatus(){
                var path = document.location.href.split('#/'),
                pathArr = path.length==1 ? new Array() : path[1].split('/'),
                module  = pathArr[0] !=undefined ? pathArr[0] : '',
                item    = pathArr[1]!=undefined ? pathArr[1] : '',
                child   = pathArr[2]!=undefined ? pathArr[2] : '';
                //设置当前模块菜单栏的选中或打开的菜单
                this.ModuleActive = module;
                var activeitem = module+'/'+item;
                var action = {'update':true,'view':true};
                if(child!='' && !action[child]){
                    activeitem +=  '/'+child;
                }
                this.itemActive = activeitem;
                this.openNames = new Array(module+'/'+item);
                this.display[module]= true;

                this.$nextTick(function() {
                    this.$refs.leftmenu.updateOpened();
                    this.$refs.leftmenu.updateActiveName();
                    this.$refs.topmenu.updateOpened();
                    this.$refs.topmenu.updateActiveName();
                })
            }
        },
        created: function () {
            Check('view',this.perCheck).then(res=>{
                this.perCheck = res;
                this.menuStatus();
            });
        },
    }
</script>